<template>
  <div style="height:6vh;background-color:#fff;padding: 10px 20px;">
    <span style="line-height: 60px;font-size: 20px;">黑名单管理</span>
  </div>
  <!--  查询-->
  <el-card>
    <el-form label-width="150px" style="margin: 20px;margin-top: 10px">
      <el-row :gutter="60">
        <el-col :span="24" style="margin-bottom: 3px;margin-top: 0">
          <span >输入查询条件</span>
        </el-col>

        <el-col :span="12">
          <el-form-item label="证件类型">
            <el-select>
              <el-option label="身份证" value="10"></el-option>
              <el-option label="法人机构下跨网点" value="20"></el-option>
            </el-select>
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="证件号码">
            <el-input ></el-input>
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="客户名称">
            <el-input ></el-input>
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="状态">
            <el-select>
              <el-option label="待审批" value="10"></el-option>
            </el-select>
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="审批状态">
            <el-select>
              <el-option label="待审批" value="10"></el-option>
            </el-select>
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="客户号">
            <el-input ></el-input>
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="是否全省不宜贷款客户名单">
            <el-select>
              <el-option label="是" value="10"></el-option>
              <el-option label="否" value="20"></el-option>
            </el-select>
          </el-form-item>
        </el-col>

        <el-col :span="12">
        <el-form-item label="登记日期">
            <el-date-picker type="date"></el-date-picker>
        </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="登记人">
            <el-input ></el-input>
          </el-form-item>
        </el-col>

      </el-row>
      <el-form-item style="display: grid; place-items: center;">
        <el-space :size="100">
          <el-button type="primary">查询</el-button>
          <el-button >重置</el-button>
        </el-space>
      </el-form-item>

    </el-form>
  </el-card>
  <!--查询结果列表-->
  <el-card>
    <el-form >
      <div>
        <el-button @click="beforeAdd">新增</el-button>
        <el-button @click="beforeEdit">修改</el-button>
        <el-button @click="beforeView">查看</el-button>
        <el-button>删除</el-button>
        <el-button @click="beforeRemove">移除</el-button>
        <el-button>导入</el-button>
        <el-button>模板下载</el-button>
      </div>
      <el-table style="width: 100%">
        <el-table-column label="序号" type="index"  align="center"></el-table-column>
        <el-table-column label="客户号" prop=""  align="center"></el-table-column>
        <el-table-column label="客户名称" prop=""  align="center"></el-table-column>
        <el-table-column label="证件类型" prop=""  align="center"></el-table-column>
        <el-table-column label="证件号码" prop=""  align="center"></el-table-column>
        <el-table-column label="状态" prop="" align="center"></el-table-column>
        <el-table-column label="审批状态" prop=""  align="center"></el-table-column>
        <el-table-column label="是否全省不宜贷款名单" prop=""  align="center"></el-table-column>
        <el-table-column label="登记人" prop=""  align="center"></el-table-column>
        <el-table-column label="登记日期" prop=""  align="center"></el-table-column>
        <el-table-column label="登记网点" prop=""  align="center"></el-table-column>
      </el-table>
    </el-form>
  </el-card>

  <!--新增弹窗-->
  <el-dialog :title="dialogTitle"
             style="width: 1000px;padding: 40px"
             v-model="dialogVisible"
             :before-close="handleClose"
  >
    <el-form label-width="200px"  style="width: 100%">
      <el-row>

        <el-col :span="12">
          <el-form-item label="客户号">
            <el-input></el-input>
          </el-form-item>
        </el-col>

        <el-col :span="12">
        </el-col>

        <el-col :span="12">
          <el-form-item label="证件类型">
            <el-input></el-input>
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="证件号码">
            <el-input></el-input>
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="客户名称">
            <el-input></el-input>
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="认证方式">
            <el-select>
              <el-option label="人工认证" value="10"></el-option>
            </el-select>
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="加入原因">
            <el-select>
              <el-option label="不还钱" value="10"></el-option>
            </el-select>
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="是否全省不宜贷款名单">
            <el-select>
              <el-option label="是" value="10"></el-option>
              <el-option label="否" value="20"></el-option>
            </el-select>
          </el-form-item>
        </el-col>

        <el-col :span="24">
          <el-form-item label="加入原因" style="width: 100%">
            <el-input type="textarea" v-model="text" style="width: 100%"></el-input>
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="登记人">
            <el-input readonly ></el-input>
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="登记网点">
            <el-input readonly ></el-input>
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="登记日期">
            <el-input readonly ></el-input>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </el-dialog>
</template>

<script setup>

import {ref} from "vue";

//弹窗标题
const dialogTitle=ref();
//是否打开弹窗
const dialogVisible=ref(false);
//打开新增页面
const beforeAdd=()=>{
  dialogVisible.value=true;
  dialogTitle.value='新增';
}
const beforeEdit=()=>{
  dialogVisible.value=true;
  dialogTitle.value='修改';
}
const beforeView=()=>{
  dialogVisible.value=true;
  dialogTitle.value='查看';
}
//关闭页面
const handleClose=()=>{
  if (confirm('您确认要关闭本弹窗吗?')){
    dialogVisible.value=false;
  }
}
const text=ref('');
</script>


<style scoped>

</style>